<template>
  <div class="app-container">
    <!-- 条件搜索 -->
    <div class="filter-container">
      <div style="float: right;">
        <el-button icon="el-icon-refresh" circle @click="handleFilterQuery" />
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      scrollbar-always-on="true"
    >
      <el-table-column type="selection" width="50px" align="center" />
      <el-table-column label="序号" type="index" width="50px" align="center" />

      <!--按需调整-->
      <el-table-column label="单据编号" min-width="100px" align="left">
        <template v-slot="{row}">
          <span>{{ row.appNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="附件名称" min-width="90px" align="left">
        <template v-slot="{row}">
          <span>{{ row.fileName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="附件类型" min-width="70px" align="left">
        <template v-slot="{row}">
          <ft-dict-translate dict-type="file_type" :value="row.fileType" />
        </template>
      </el-table-column>
      <el-table-column label="附件版本" min-width="50px" align="left">
        <template v-slot="{row}">
          <span>{{ row.fileVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column label="附件路径" min-width="200px" align="left">
        <template v-slot="{row}">
          <el-link @click="handleDetail(row)">{{ row.fileUrl }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="160px" align="left">
        <template v-slot="{row}">
          <span>{{ row.updatedTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格分页 -->
    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="handleInit" />
  </div>
</template>

<script>
import { handlePageList } from './api'
import { handleFileUrl } from '@/api/ft'
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination/index.vue'
import FtDictTranslate from '@/views/components/FtDictTranslate/index.vue'

export default {
  // 当前页面名称（组件）
  name: 'AttachInfo',
  // 引用组件
  components: { FtDictTranslate, Pagination },
  directives: { },
  filters: {},
  // props属性
  props: {
    param: {
      type: String,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 列表table的key
      tableKey: 0,
      // 遮罩层
      loading: true,
      // table数据对象
      list: [],
      // 总条数
      total: 0,
      // table条件查询对象
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        // sort: '+id',
        param: {
          // 按需调整
          appNo: undefined
        }
      }
    }
  },
  computed: {},
  watch: {
    param: {
      immediate: true,
      handler(newVal) {
        this.listQuery.param.appNo = newVal
        this.handleInit()
      }
    }
  },
  created() {},
  mounted() {
    // this.handleInit()
  },
  methods: {
    // 查询table数据对象
    handleInit() {
      if (this.listQuery.param.appNo) {
        this.loading = true
        handlePageList(this.listQuery).then(res => {
          this.list = res.data
          if (res.total) {
            this.total = Number(res.total)
          }
          this.loading = false
        })
      }
    },
    // 条件查询table数据
    handleFilterQuery() {
      this.listQuery.pageNum = 1
      this.handleInit()
    },
    // 更多点击操作项
    handleClick(item, row, index) {
      // 编辑
      if (item === 'edit') {
        this.handleUpdate(row, index)
      }
      // 删除
      if (item === 'del') {
        this.handleDelete(row, index)
      }
    },
    // 详情
    handleDetail(row) {
      const parts = row.fileUrl.split('/')
      // 预览文件
      handleFileUrl(parts[0], parts[1]).then(res => {
        window.open(res.data, '_blank')
      })
    },
    // 关闭弹出层
    handleClose() {
      this.handleRestFormData()
      this.visible = false
    }
  }
}
</script>
